<!--
 * @Descripttion: 
 * @version: 
 * @Date: 2021-04-20 11:06:21
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-09-27 18:24:27
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
  <div class="login">
    <div class="header">
        <div class="logo">
            <img src="../../assets/logo.png" alt="" style="width: 15px;height: 15px;margin-right: 10px;">
            <div>GUOLY&nbsp;AI</div>
        </div>
        <ChangeLang></ChangeLang>
    </div>
    <div class="content">
      <div class="left">
      </div>
    <div class="right">
      <el-form class="form" :model="model" :rules="rules" ref="loginForm">
      <h1 class="title">国利AI智能用户营运平台</h1>
      <el-form-item prop="userName">
        <el-input
          class="text"
          v-model="model.userName"
          prefix-icon="User"
          clearable
          :placeholder="$t('login.username')"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          class="text"
          v-model="model.password"
          prefix-icon="Lock"
          show-password
          clearable
          :placeholder="$t('login.password')"
        />
      </el-form-item>
      <el-form-item prop="captcha">
        <div class="captcha">
          <el-row :gutter="20">
          <el-col :span="16">
            <el-input
              v-model="model.captcha"
              prefix-icon="Picture"
              placeholder="验证码"
              @keyup.enter="submit"
            ></el-input>
          </el-col>
          <el-col :span="8" class="login-captcha">
            <img :src="captchaPath" @click="acquireCaptcha()" alt="" />
          </el-col>
        </el-row>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          class="custom-button"
          @click="submit"
        >
          {{ btnText }}
          
        </el-button>
        <!-- <el-button
          :loading="loading"
          type="primary"
          class="btn"
          size="large"
          @click="submit"
        >
          {{ btnText }}
        </el-button> -->
      </el-form-item>
    </el-form>
    <div style="width:fit-content">
      <div>Copyright&copy;-2024-广东国利信息网络</div>
      <div>地址:广州市区天桥南大街1号天桥艺术大厦A座-联系我们:020-68000000</div>
    </div>
    </div>
    </div>
  </div>
<!--   <div class="change-lang">
    <change-lang />
  </div> -->
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  reactive,
  toRefs,
  ref,
  computed,
  watch,
} from 'vue'
import { Login } from '@/api/login'
import { useRouter, useRoute } from 'vue-router'
import ChangeLang from '@/layout/components/Topbar/ChangeLang.vue'
import useLang from '@/i18n/useLang'
import { useApp } from '@/pinia/modules/app'
import { getUUID } from '@/utils'

export default defineComponent({
  components: { ChangeLang },
  name: 'login',
  setup() {
    const { proxy: ctx } = getCurrentInstance() // 可以把ctx当成vue2中的this
    const router = useRouter()
    const route = useRoute()
    const { lang } = useLang()
    watch(lang, () => {
      state.rules = getRules()
    })
    const getRules = () => ({
      userName: [
        {
          required: true,
          message: ctx.$t('login.rules-username'),
          trigger: 'blur',
        },
      ],
      password: [
        {
          required: true,
          message: ctx.$t('login.rules-password'),
          trigger: 'blur',
        },
        {
          min: 6,
          max: 12,
          message: ctx.$t('login.rules-regpassword'),
          trigger: 'blur',
        },
      ],
      captcha:[
        {
          required: true,
          message: "验证码不能为空！！！",
          trigger: 'blur',
        },
      ],
    })
    
    const state = reactive({
      model: {
        userName: '',
        password: '',
        uuid: '',
        captcha: '',
      },
      rules: getRules(),
      loading: false,
      btnText: computed(() =>
        state.loading ? ctx.$t('login.logining') : ctx.$t('login.login')
      ),
      loginForm: ref(null),
      captchaPath: ref(''),

      // 登录
      submit: () => {
        if (state.loading) {
          return
        }
        state.loginForm.validate(async valid => {
          if (valid) {
            state.loading = true
           
            Login(state.model).then(({ data }) => {
              ctx.$message.success({
                message: ctx.$t('login.loginsuccess'),
                duration: 1000,
              })

              const targetPath = decodeURIComponent(route.query.redirect)
              if (targetPath.startsWith('http')) {
                // 如果是一个url地址
                window.location.href = targetPath
              } else if (targetPath.startsWith('/')) {
                // 如果是内部路由地址
                router.push(targetPath)
              } else {
                router.push('/')
              }
              useApp().initToken(data)
            })
            .finally(() => {
              state.loading = false
            });
            /* const { code, data, message } = await Login(state.model)
            if (+code === 20000) {
              ctx.$message.success({
                message: ctx.$t('login.loginsuccess'),
                duration: 1000,
              })

              const targetPath = decodeURIComponent(route.query.redirect)
              if (targetPath.startsWith('http')) {
                // 如果是一个url地址
                window.location.href = targetPath
              } else if (targetPath.startsWith('/')) {
                // 如果是内部路由地址
                router.push(targetPath)
              } else {
                router.push('/')
              }
              useApp().initToken(data)
            } else {
              // 重新获取验证码
              acquireCaptcha()
            } 
            state.loading = false*/
          }
        })
      },
    })
    // 获取验证码
    const acquireCaptcha = () => {
      console.log('===========获取验证码=========')
      state.model.uuid = getUUID()
      state.captchaPath =
        '/api/knowledgeAdmin/xtyh/captcha.jpg?uuid=' + state.model.uuid
    }

    acquireCaptcha()

    return {
      ...toRefs(state),
      acquireCaptcha,
    }
  },
})
</script>

<style lang="scss" scoped>

.login {
  transition: transform 1s;
  transform: scale(1);
  // width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f6faff;
  
  .header{
    background-color: #ffffff;
    height: 48px;
    display: flex;
    padding:  10px 20px 10px 20px;
    color: #0066ff;
    font-size: 25px;
    font-weight: 600;
    line-height: 48px;
    box-sizing: content-box;
    justify-content: space-between;
    .logo{
      display: flex;
      align-items: center;
    }
  }
  .content{
    display: flex;
    height: calc(100% - 50px);
    .left{
    flex:1;
    background-image: url('../../assets/images/fileImg/loginbc.jpg');
    background-repeat: no-repeat; /* 图片不重复 */  
    background-position: center;
    background-size: 100% 100%;
  }
  // background: #77a1d7;
  .right{
    flex: 1;
    display: flex;
    
    align-items: center;
    flex-direction: column;
    .form {
    background-color: #fff;
    max-width: 70%;
    padding: 0 24px;
    box-sizing: border-box;
    margin-bottom: 6vh;
    margin-top: 20vh;
    padding-top: 3vh;
    :deep {
      .el-input__wrapper {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        background: #ffffff;
      }
      .el-input-group--append > .el-input__wrapper {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      .el-input-group--prepend > .el-input__wrapper {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    .title {
      color: #181313;
      text-align: center;
      font-size: 24px;
      margin: 0 0 24px;
    }
    .text {
      font-size: 16px;
      :deep(.el-input__inner) {
        color: #1e0f0f;
        height: 48px;
        line-height: 48px;
        &::placeholder {
          color: rgba(18, 10, 10, 0.2);
        }
      }
    }
    .captcha {
      width:100%;
      font-size: 16px;
      :deep(.el-input__inner) {
        color: #1e0f0f;
        height: 48px;
        line-height: 48px;
        &::placeholder {
          color: rgba(18, 10, 10, 0.2);
        }
      }
    }
    .login-captcha {
      overflow: hidden;
      > img {
        width: 100%;
        cursor: pointer;
        height: 50px;
      }
    }
    .btn {
      width: 100%;
    }
  }
  }
  }
}
.change-lang {
  position: fixed;
  right: 20px;
  top: 20px;
  :deep {
    .change-lang {
      height: 24px;
      &:hover {
        background: none;
      }
      .icon {
        color: #fff;
      }
    }
  }
}
// 定义变量  
$pink: #ea4c89; // 示例粉色  
$white: #fff; // 白色  
$charcoal: #444; // 示例炭色  
$title-text: 'Work Sans', sans-serif; // 示例字体  
  
// 覆盖默认样式  
.custom-button {  
  
  background: $pink;  
  border: 0;  
  color: $white;  
  font: 1.1rem $title-text;  
  margin: 1.7em auto .6em;  
  background-color: #1177ff;
  outline: none;  
   /* 直接设置按钮的高度 */  
  height: 48px; /* 替换为你需要的确切高度 */  
  line-height: 48px; /* 这通常与 height 相同，以保持文本垂直居中 */   
  transition: all .15s ease-out;  
  -webkit-transition: all .15s ease-out;  
  width: 100%;  
  
  &:hover {  
    background: $charcoal;  
    cursor: pointer;  
  }  
  
  &:focus {  
    outline: none;  
  }  
}  
</style>
